import { createStyles, useResponsive } from "antd-style";

const useStyle = createStyles(({ token, css, responsive, collapsed }) => {
  return {

    mobileSider: css`
        @media (max-width: 430px) {
           padding-top:48px !important;
         }
        `,
    mobileLayout: css`
       @media (max-width: 430px) {
           margin-left:0 !important;
          }
       `,
    fixedHeadLogo: css`
       position: sticky;
       top: 0;
       height:128px;
       `,
    ScroollMenu: css`
       height:calc(100% - 128px);
       overflow-y:auto;
       margin:0;
       `,
    layout: css`
    width: 100%;
    height: 100vh;
    display: flex;
    background: ${token.colorBgContainer};
    font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
    /* 移动端隐藏菜单 */
    @media (max-width: 768px) {
     margin-left:0 !important;
     `,
    menu: css`
    background: ${token.colorBgLayout}80;
    width: 240px;
    z-index: 10000;
    /* 移动端隐藏菜单 */
    @media (max-width: 768px) {
      width: 100%;
      position: fixed;
      left: -100%; /* 默认隐藏 */
      transition: left 0.3s;
      /* 展开状态 */
      &[data-collapsed="false"] {
        left: 0;
      }
    }
  `,
    chat: css`
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    ${responsive.mobile} {
      padding: 5px 8px;
      // margin-top: 48px; // 给移动端顶部留出空间
    }
  `,
    mobileHeader: css`
    display: none;
    ${responsive.mobile} {
      display: flex;
      align-items: center;
      // padding: 0 16px;
      height: 48px;
      background: ${token.colorBgContainer};
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 99;
    }
  `,
    conversations: css`
    // padding: 0 12px;
    //   flex: 1;
      // overflow-y: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
      &::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
    padding: 0 !important;
    margin: 0;
    color: ${token.colorText};
    
    .ant-conversations-group {
      width: 100%;
      padding-left: 1px; // 与列表项对齐
    }
    
    .ant-conversations-item {
      padding-left: 16px !important;
      margin-left: 0 !important;
    }

    .ant-conversations-group-title {
      padding-left: 10px !important;
      margin-left: 0 !important;
    }
      .ant-conversations-list{
      padding-inline-start:10px;
      }
    `,
    messages: css`
    height: calc(100vh - 114px); /* 留出输入框高度 */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    &::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
      @media (max-width: 768px) {
      height: calc(100vh - 114px); /* 留出输入框高度 */
  }
  `,
    messagesContain: css`
  height: calc(100vh - 114px); /* 留出输入框高度 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
   display: flex; // 启用 Flexbox 布局
     justify-content: center; // 水平居中
      align-items: center;
       flex-wrap:wrap;
     &::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    }
`,
    mainContain: css`
  height:100%;
   display: flex; // 启用 Flexbox 布局
     justify-content: center; // 水平居中
      align-items: center;
       flex-wrap:wrap;
  `,
    placeholder: css`
      maxWidth: '600px';
      width: 100%;
      height:100%;
      display: flex; // 启用 Flexbox 布局
      justify-content: center; // 水平居中
      align-items: center;
      flex-wrap:wrap;
    `,
    flexWrap: css`
    @media only screen and (max-width: 430px) {
    div{
     display: flex; // 启用 Flexbox 布局
     flex-wrap:wrap;
         justify-content: center;
          div{
          width:45%;
           p{
            display: flex; // 启用 Flexbox 布局
            justify-content: center; // 水平居中
            width:100%
            }
      }
    }
  }
  `,
    sender: css`
      // box-shadow: ${token.boxShadow};
    `,
    logo: css`
      display: flex;
      height: 72px;
      align-items: center;
      justify-content: start;
      padding: 0 24px;
      box-sizing: border-box;
      img {
        width: 24px;
        height: 24px;
        display: inline-block;
      }
      span {
        display: inline-block;
        margin: 0 8px;
        font-weight: bold;
        color: ${token.colorText};
        font-size: 16px;
      }
    `,
    addBtn: css`
      background: #1677ff0f;
      border: 1px solid #1677ff34;
      width: calc(100% - 24px);
      margin: 0 12px 24px 12px;
    `,
    footer: css`
      margin-bottom:10px;
        @media (max-width: 430px) {
           .ant-sender .ant-sender-content {
              padding-block: 7px;
             }
         }
      `,
  };
});

export default useStyle;
